<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div {
            width: 800px;
            height: 800px;
            background-color: salmon;
            display: flex;
            justify-content: center;
            align-items: center;
        }
    </style>
</head>

<body>
    <div>
        <canvas width="750" height="750">
        </canvas>
        <h1>我是陈际帆</h1>
        <h2>我是陈冠希啊</h2>

    </div>
    <script>
        // var canvas = document.querySelector('canvas');
        //画笔
        var context = document.querySelector('canvas').getContext('2d');
        var num = 10;
        for (var i = 0; i < 15; i++) {
            //设置线条起始点
            context.moveTo(10, num);
            //设置结束点
            context.lineTo(710, num);
            //设置线条宽度
            context.lineWidth = 2;
            //设置颜色
            context.strokeStyle = 'black';
            num += 50;
        }
        var sum = 10;
        for (var i = 0; i < 15; i++) {
            context.moveTo(sum, 10);
            //设置结束点
            context.lineTo(sum, 710);
            //设置线条宽度
            context.lineWidth = 2;
            //设置颜色
            context.strokeStyle = 'black';
            sum += 50;
        }
        //绘制线条

        //绘制矩形
        context.stroke();
        context.fillStyle = 'salmon';
        context.fillRect(255, 305, 210, 110);
        context.fillStyle = 'red';
        context.fillRect(285, 324, 150, 75);
        context.fillStyle = 'black';
        context.font = '30px 华文彩云';
        context.fillText('cjf好帅', 315, 370);

        //绘制圆形(必须加begin close)
        context.beginPath();
        context.arc(160, 160, 10, 0, Math.PI * 2, true);
        context.fill();
        context.closePath();


        context.beginPath();
        context.arc(560, 160, 10, 0, Math.PI * 2, true);
        context.fill();
        context.closePath();

        context.beginPath();
        context.arc(560, 560, 10, 0, Math.PI * 2, true);
        context.fill();
        context.closePath();

        context.beginPath();
        context.arc(160, 560, 10, 0, Math.PI * 2, true);
        context.fill();
        context.closePath();
    </script>
</body>

</html>